<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/angular.js"></script>
    <script src="../lib/angular-route.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', ['ngRoute']);
        /*
            provider是仅有的可以通过.config()方法配置的服务。使用一个provider，可以提供给服务对象更多配置。
            在服务可用之前，这些参数是已经有效的了。
         */
        myApp.controller('myProviderCtrl', ['$scope', 'myProvider', function ($scope, myProvider) {
            $scope.artist = myProvider.getArtist();
            $scope.data={};
            $scope.data.configThing = myProvider.myConfig;
        }]);
        myApp.provider('myProvider', function () {
            this._artist = 'Tom';
            this.thingFromConfig = 'abc';

            this.$get = function () {
                var that = this;
                return {
                    getArtist: function () {
                        return that._artist;
                    },
                    myConfig: that.thingFromConfig
                }
            };
        });
        myApp.config(function (myProviderProvider) {
            myProviderProvider.thingFromConfig = 'This was set in config()';
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myProviderCtrl">
    <h1>Hello Provider</h1>
    <h1>{{artist}}</h1>
    <h3>{{data.configThing}}</h3>
</div>
</body>
</html>